<template>
  <CloudDialog
    v-model:visible="visible"
    title="证书详情"
    :width="600"
    :mask-closable="false"
    :footer="false"
    :before-open="handleBeforeOpen"
    :cancel="handleCancel">
    <div class="flex flex-col gap-y-6">
      <div class="flex justify-between">
        <a-radio-group v-model="radioValue" type="button">
          <a-radio :value="1">证书信息</a-radio>
          <a-radio :value="2">证书</a-radio>
          <a-radio :value="3">私钥</a-radio>
        </a-radio-group>
        <div
          v-if="radioValue !== 1"
          class="flex gap-x-1 items-center text-primary cursor-pointer"
          @click="handleCopy">
          <i-icons-copy-active />
          复制
        </div>
      </div>
      <a-descriptions
        v-if="radioValue === 1"
        :data="licenseInfo"
        :column="2"
        :label-style="{ width: '56px', marginRight: '16px' }"
        size="large"
        layout="inline-horizontal" />
      <CloudScrollbar v-else class="license-wrap">
        {{ radioValue === 2 ? content : secretKey }}
      </CloudScrollbar>
    </div>
  </CloudDialog>
</template>
<script lang="ts" setup>
import { getApiCertApi } from '@/apis/modules/license'
import { type DescData } from '@arco-design/web-vue'
import { useClipboard } from '@vueuse/core'

interface IProps {
  certId: string
  source: number
}
const visible = defineModel<boolean>({ required: true })
const props = withDefaults(defineProps<IProps>(), {})
const { copy } = useClipboard({
  legacy: true
})
const content = ref('')
const secretKey = ref('')
const licenseInfo = ref<DescData[]>([])
const handleCopy = () => {
  if (radioValue.value === 2) {
    copy(String(content.value)).then(() => {
      ToastUtils.success('复制成功')
    })
  } else if (radioValue.value === 3) {
    copy(String(secretKey.value)).then(() => {
      ToastUtils.success('复制成功')
    })
  }
}

const licenseSource = computed(() => {
  if (props.source === 1) return '手动上传'
  if (props.source === 2) return '系统托管'
  return '-'
})
const radioValue = ref(1)
const handleBeforeOpen = async () => {
  try {
    const res = await getApiCertApi({ id: props.certId ?? '' })
    content.value = res.crt ?? ''
    secretKey.value = res.private_key ?? ''
    licenseInfo.value = [
      {
        label: '域名',
        value: res.domain ?? '',
        span: 2
      },
      {
        label: '证书品牌',
        value: res.brand ?? '',
        span: 1
      },
      {
        label: '生效时间',
        value: formatUnix(res.effective_at),
        span: 1
      },
      {
        label: '证书来源',
        value: licenseSource.value,
        span: 1
      },
      {
        label: '过期时间',
        value: formatUnix(res.expired_at),
        span: 1
      }
    ]
  } catch (error) {
    console.error(error)
    return true
  }
}
const handleCancel = () => {}
</script>
<style lang="less" scoped>
.license-wrap {
  @apply h-60! py-2 px-3 bg-fill-1 text-2 text-xs/5 rounded;
  border: 1px solid var(---color-border-4, #dfe2e5);
  white-space: break-spaces;
  text-wrap: wrap;
  word-break: break-all;
}
:deep(.arco-descriptions-row) {
  &:not(.arco-descriptions-row:first-child) {
    .arco-descriptions-item {
      @apply w-1/2 pt-4;
    }
  }
  .arco-descriptions-item {
    .arco-descriptions-item-label {
      @apply text-4 font-400;
    }
    .arco-descriptions-item-value {
      @apply text-2;
    }
  }
}
</style>
